//签到
<template>
  <div class=''>
    <navBar :title="title"></navBar>
    <div class="bigBox">
      <div class="sign">
        <span class="days">{{value}} 天</span>
        <span class="continuous">已连续签到</span>
        <span class="integral">当前积分：{{value}}</span>
        <van-rate v-model="tValue"
        class="star" 
        count="7"
        readonly />
      </div>
      <van-button type="primary" class="btn" @click="signEvt" :disabled="isDisable">签到</van-button>
      <div class="pickShop">
        <h4>推荐商品</h4>
        <commodity ref="commodity"/>
      </div>
    </div>
  </div>
</template> 

<script>
  import navBar from '@/components/navBar.vue'
  import commodity from '@/components/commodity.vue'

  export default {
    name: '',
    props: {},
    components: {
      navBar,
      commodity
    },
    data() {
      return {
        title:'签到',
        value: 0,
        isDisable:false,
        tValue:0,
        nowType: "proSelected"
      };
    },
    mounted(){
        this.$nextTick(() => {
      this.$refs.commodity.getGoodsList();
        })
    },
    methods: {
      signEvt(){
        this.value ++
        this. isDisable= true
        this.tValue = this.value % 7
        if(this.value > 1 && this.value % 7 == 0){
          this.tValue = 7
        }
        localStorage.setItem("value", this.value);
        localStorage.setItem("date", getTime());
      }
    },
    beforeMount(){
        let a=localStorage.getItem("value");
        this.value=Number(a);
        this.tValue = this.value % 7;
        let time = localStorage.getItem("date");
        let date = new Date();
        let nowDate=date.getDate()+"";
        if(time==nowDate){
          this.isDisable= true;
        }
    },
  };
  function getTime(){
    let date = new Date();
    // let year=date .getFullYear(); //获取完整的年份(4位)
    // let moth=date .getMonth(); //获取当前月份(0-11,0代表1月)
    let date1=date.getDate(); //获取当前日(1-31)
    // let hours=date .getHours(); //获取当前小时数(0-23)
    // let min=date .getMinutes(); //获取当前分钟数(0-59)
    // let sec=date .getSeconds(); //获取当前秒数(0-59)
    // return year+"-"+(moth+1)+"-"+date1+" "+hours+":"+min+":"+sec
    return date1;
  }
</script>

<style lang='scss' scoped>
  @import '../../../style/common.sass';

  .bigBox{
    width: 100%;
    margin-top: 2.61rem;
  }
  .sign{
    width: 100%;
    height: 2.47rem;
    padding-top: 12.67rem;
    background-color: $bgc-a;
    position: relative;
    .days{
      display: block;
      padding-top: 2.57rem;
      font-size: 2.27rem;
      text-align: center;
      color: #fff;
      position: absolute;
      top: 1.76rem;
      left: 9.97rem;
    }
    .continuous{
      position: absolute;
      bottom: 1.77rem;
      left: 40%;
    }
    .integral{
      display: block;
      padding-left: 1.47rem;
    }
    .star{
      padding-top: 2.53rem;
      padding-left: .53rem;
    }
  }
  .btn{
    width: 4.67rem;
    height:4.67rem;
    background-color: $bgc-a;
    margin-left: 50%;
    margin-top: 1.27rem;
    border-radius: 50%;
  }
  .pickShop{
    width: 100%;
    height: 2.67rem;
    margin-top: 1.07rem;
    h4{
      margin-bottom: .73rem;
    }
  }
    
  </style>